<template>
  <view class="container">
    <div class="ibox">
      <div class="mb10">充值套餐（元）</div>
      <div class="flexB wrap">
        <div @click="price = i.rechargeEnd" :class="['ii', price == i.rechargeEnd ? 'cur' : '']" v-for="i in list"
          :key="i.id">
          <div class="z" v-if="i.discount!=10">{{ i.bak }}</div>
          ¥{{ i.rechargeEnd }}
        </div>
      </div>
    </div>
    <!-- <div class="ibox">
			<div class="mb10">自定义充值（元）</div>
			<input v-model="price" class="num" type="digit" placeholder="例如：120" />
		</div> -->
    <div class="btn" @click="pay">微信支付¥{{ price }}元</div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      list: []
    }
  },
  onLoad() {
    this.$request({
      url: '/recharge/rechargeAll',
      method: 'get',
    }).then(res => {
      this.list = res.data;
      this.price = res.data[0].rechargeEnd;
    })
  },
  methods: {
    pay() {
      this.$request({
        url: '/wxpay/recharge',
        data: {
          amount: this.price
        }
      }).then(res => {
        let no = res.data;
        this.pay2(no);
      })
    },
    pay2(no) {
      this.$request({
        url: '/wxpay/unifiedOrder',
        method: 'get',
        data: {
          pickNo: no
        }
      }).then(res => {
        let obj = res.data.jsConfig;
        uni.requestPayment({
          provider: 'wxpay',
          package: obj.packageValue,
          timeStamp: obj.timeStamp,
          nonceStr: obj.nonceStr,
          signType: obj.signType,
          paySign: obj.paySign,
          success: function (res) {
            console.log('success:' + JSON.stringify(res));
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
          }
        });
      })
    }
  }
}
</script>

<style lang="scss">
.num {
  border: 1rpx solid #eee;
  padding: 20px 10px;
  border-radius: 10px;
}

.ii {
  width: 48%;
  position: relative;
  border-radius: 30rpx;
  background: #b2b2b2;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-bottom: 10px;
}

.z {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 20rpx;
}

.cur {
  background: $theme;
}

.btn {
  width: 100%;
  margin-top: 20px;
  background: $theme;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 20px;
}
</style>
